<div class="row" style="padding-top: 15px;">
    <div class="col-md-12">
        <div class="dt_scroll">
            <table class="table table-sm">
                <thead>
                <tr>
                    <th width="60"># <i class="icon-refresh table-refresh" (click)="refreshData()"></i> </th>
                    <th *ngFor="let col of dtConfig.cols" [class.dt_hidden]="col.hidden">{{col.title}}
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let data of showData;let i=index;" [class.select-row]="selectRow===data"
                    (click)="selectRecord(data)">
                    <td width="60">{{(currentPage-1)*dtConfig.pageSize+i}}</td>
                    <td *ngFor="let col of dtConfig.cols" [class.dt_hidden]="col.hidden">{{data[col.dataIndex]}}
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="col-md-12" style="padding-top: 5px;">
    <div *ngIf="dtConfig.paging" class="row" style="height: 30px;line-height: 30px">
        <div class="btn-group btn-group-sm" role="group" aria-label="First group">
            <button type="button" class="btn btn-outline-secondary"
                    style="height: 27px!important;line-height: 27px!important;padding: 1px;text-align: center;">
                <select [(ngModel)]="dtConfig.pageSize" (change)="changPageSize($event)"
                        style="height: 20px!important;margin: 1px;padding: 0px;border: 0px;border: 0px;">
                    <option *ngFor="let ls of dtConfig.pageSizeList" [value]="+ls">
                        {{ls}}
                    </option>
                </select>
            </button>

            <button type="button" class="btn btn-outline-secondary" *ngIf="currentPage> 5" (click)="goFirstPage()">
                <i
                        class="icon-double-angle-left"></i></button>
            <button type="button" class="btn btn-outline-secondary" *ngIf="currentPage> 5"
                    (click)="changCurrentPageNext(false)"><i
                    class="icon-angle-left"></i></button>

            <button type="button" class="btn" [class.btn-outline-secondary]="currentPage!==startPage"
                    [class.btn-primary]="currentPage===startPage" (click)="selectCurrentPage(startPage)"
                    *ngIf="startPage+0<=totalPage">{{startPage}}
            </button>
            <button type="button" class="btn" [class.btn-outline-secondary]="currentPage!==startPage+1"
                    [class.btn-primary]="currentPage===startPage+1" (click)="selectCurrentPage(startPage+1)"
                    *ngIf="startPage+1<=totalPage">{{startPage+1}}
            </button>
            <button type="button" class="btn" [class.btn-outline-secondary]="currentPage!==startPage+2"
                    [class.btn-primary]="currentPage===startPage+2" (click)="selectCurrentPage(startPage+2)"
                    *ngIf="startPage+2<=totalPage">{{startPage+2}}
            </button>
            <button type="button" class="btn" [class.btn-outline-secondary]="currentPage!==startPage+3"
                    [class.btn-primary]="currentPage===startPage+3" (click)="selectCurrentPage(startPage+3)"
                    *ngIf="startPage+3<=totalPage">{{startPage+3}}
            </button>
            <button type="button" class="btn" [class.btn-outline-secondary]="currentPage!==startPage+4"
                    [class.btn-primary]="currentPage===startPage+4" (click)="selectCurrentPage(startPage+4)"
                    *ngIf="startPage+4<=totalPage">{{startPage+4}}
            </button>

            <button type="button" class="btn btn-outline-secondary" *ngIf="totalPage> 5"
                    (click)="changCurrentPageNext(true)"><i class="icon-angle-right"></i></button>
            <button type="button" class="btn btn-outline-secondary" *ngIf="totalPage> 5" (click)="goEndPage()"><i
                    class="icon-double-angle-right"></i></button>
        </div>

    </div>
</div>
